<template>
	<view>
		<dsl-navbar title="选择接收人" isBack bgTopImg="#ffffff" ></dsl-navbar>
		<view class="bg-white padding-bottom-xl">

			<view class="input_body align-center rowsc ">
				<image src="/static/user/icon_sysous.png" mode="" class="input_icon margin-right-sm"></image>
				<input type="text" value="" placeholder="搜索公告标题、公告内容" />
			</view>
		</view>
		<view class="classify_body rowsa padding bg-white">
			<view v-for="(item,index) in classifyList " class="text-center" :key='index'
				@click="classifyMen(item.id,item.title)">
				<image :src="item.icon" mode="" class="classify_icon"></image>
				<view class="classify_title">{{item.title}}</view>
			</view>
		</view>
		<view class="text-sm rowsb padding bg-white" v-if="type == 3">
			<view v-for="(item,index) in classifys" :key='index' @click="num= index">
				<view> {{item.title}}</view>
				<view class="heng margin-top-xs animation-scale-up" v-if="index == num"></view>
			</view>
		</view>


		<!-- 员工列表-业务员 -->
		<view v-for="(item,index) in staffList" :key='index' class="align-center padding" @click="selectMen(type,item)">
			<image :src="item.select?'/static/icon/select.png':'/static/icon/select2.png'" mode=""
				class="classify_select"></image>
			<text class="text-sm margin-left-sm">{{item.username?item.username:item.name}}</text>
		</view>
		<view class="padding-sm align-center rowsb bg-white submit_bottom">
			<view class="align-center" @click="isSelect = true">
				<image :src="!isSelect?'/static/icon/icon-xuanzhong.png':'/static/icon/select.png'" mode=""
					class="classify_select"></image>
				<view class="margin-left-sm">
					全选
				</view>
			</view>
			<view class="submit" @click="submit()">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		myStaff, //我的员工- 1
		getenterprise, // 用工企业 -2
		talent_pool, //人才库 - 3
	} from '@/common/path.js'
	export default {
		data() {
			return {
				num:0,//默认选中分类
				isSelect: false,
				classifyList: [{
						title: '业务员',
						icon: '/static/icon/imgyewuyuan.png',
						id: 1
					},
					{
						title: '用工企业',
						icon: '/static/icon/imgqiye-2.png',
						id: 2
					},
					{
						title: '人才库',

						icon: '/static/icon/imgrencaai.png',
						id: 3
					}
				],
				//分类2
				classifys: [{
						title: '全部',
						id: ''
					},
					{
						title: '待入职',
						id: 2
					},
					{
						title: '已入职',
						id: 3
					},
					{
						title: '待面试',
						id: 1
					},
					{
						title: '离职',
						id: 4
					},
				],
				userList: [{
						select: 1,
						name: '张三'
					},

					{
						select: 2,
						name: '李四'
					}
				],
				staffList: [], //员工列表
				type: 1, //1管理员 - 2用工企业 - 3人才库
				statusNum:'',//选中
			}
		},
		onShow() {
			this.myStaff() //我的员工列表
		},
		watch: {
			isSelect() {//是否选中
				if (this.isSelect) {
					this.staffList.forEach(item => {
						item.select = true
					})
				}
			},
			num(i){
				this.statusNum = this.classifys[i].id
				this.talent_pool() //人才库
			}
		},
		methods: {

			/**
			 * @param {Object} type //1管理员 - 2用工企业 - 3人才库
			 * @param {Object} item 接收的 单选参数信息
			 */

			selectMen(type, item) {
				this.isSelect = false
				item.select = !item.select
				console.log(item);
				this.$forceUpdate()
			},
			//提交
			submit() {
				// console.log(app.talentsList);
				let list = []
				this.staffList.forEach(item => {
					if (item.select) {
						list.push(item)
					}
				})
				let data = {
					list: list,
					type: this.type
				}
				app.talentsList = data
				this.$tools.showToast2('选择完成')
				setTimeout(r => {
					this.$tools.back()
				}, 1000)
				// console.log(app.talentsList);
			},

			//选择分类
			classifyMen(i, title) {
				this.isSelect = false
				this.type = i
				this.$tools.showToast(title)
				if (i == 1) {
					this.myStaff() //我的员工列表
				} else if (i == 2) {
					this.getenterprise() //用工企业列表
				} else if (i == 3) {
					this.num = 0
					this.talent_pool() //人才库
				}
			},

			//选择员工列表
			myStaff() {
				let data = {

				}
				this.Http.POST(myStaff, data)
					.then((res) => {
						console.log('[员工]', res);
						if (res.code == 1) {
							res.data.forEach(item => {
								item.select = false
							})
							this.staffList = res.data

						}
					})
			},
			//用工企业
			getenterprise() {
				let data = {
					page: 1,
					listrows: 1000
				}
				this.Http.POST(getenterprise, data)
					.then((res) => {
						if (res.code == 1) {
							console.log('[用工企业]', res);
							res.data.forEach(item => {
								item.select = false
							})
							this.staffList = res.data
						}
					})
			},
			//人才库
			talent_pool() {
				this.Http.POST(talent_pool, {
						page: 1,
						listrows: 1000,
						status:this.statusNum
					})
					.then((res) => {
						console.log('[人才库]', res);
						if (res.code == 1) {
							res.data.forEach(item => {
								item.select = false
							})
							this.staffList = res.data
						}
					})
			}
		}
	}
</script>

<style>
	@import url("@/colorui/main.css");

	page {
		background: #F7F6FA;
	}

	/* 顶部搜索 */
	.input_body {
		width: 690rpx;
		height: 70rpx;
		background: #F7F6FA;
		opacity: 1;
		border-radius: 35rpx;
		line-height: 70rpx;
		text-align: center;
		margin: 0 auto;
	}

	.input_icon {
		width: 25rpx;
		height: 25rpx;
	}

	/* 分类 */
	.classify_body {}

	.classify_icon {
		width: 80rpx;
		height: 80rpx;
	}

	.classify_title {
		font-size: 28rpx;
	}

	.classify_select {
		width: 30rpx;
		height: 30rpx;
	}

	.submit {
		width: 230rpx;
		height: 70rpx;
		background: #00D88F;
		line-height: 70rpx;
		text-align: center;
		color: white;
		border-radius: 99rpx;
	}

	.submit_bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.heng {
		background-color: #00D88F;
		height: 4rpx;
		width: 100%;
	}
</style>
